<template>
	<view class="my-shop" :data-theme='theme()' :class="theme() || ''">
		<view class="my-shop-head">
			<view class="shop-head-info">
				<view class="d-s-s mb30">
					<image lazy-load class="shop-logo" :src="logo || '/static/shop-default.png'" mode="aspectFill">
					</image>
					<view class="shop-info">
						<view class="d-b-c white f30 fb title mb10">
							{{ shop_data.supplier.name || "" }}
							<button class="btns" v-if="shop_data.supplier.is_recycle == 0">
								正常营业
							</button>
							<button class="btns" v-else>停止营业</button>
						</view>
						<view class="f24 white mb10">
							主营品牌：{{ shop_data.supplier&&shop_data.supplier.category&&shop_data.supplier.category.name || "" }}
						</view>
						<view class="d-s-c white f24">
							加入时间：{{ shop_data.supplier.create_time || "" }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shop-data">
			<view class="shop-data-order">
				<view class="shop-data-head">
					<text class="f32 gray3 fb">数据概况</text>
				</view>
				<view class="">
					<view class="shop-data-bottom">
						<view class="shop-data-bottom-item">
							<view class="f24 gray3 mb20">累计提现(元)</view>
							<text
								class="f36 gray3 fb">{{ shop_data.supplier && shop_data.supplier.cash_money || 0}}</text>
						</view>
					</view>
					<view class="shop-data-bottom-b">
						<view class="shop-data-bottom-item">
							<view class="f24 gray3 mb20">累计成交(笔)</view>
							<text class="f36 gray3 fb">{{ shop_data.totalCount || 0 }}</text>
						</view>
						<view class="shop-data-bottom-item">
							<view class="f24 gray3 mb20">今日成交(笔)</view>
							<text class="f36 gray3 fb">{{ shop_data.todayCount || 0 }}</text>
						</view>
						<view class="shop-data-bottom-item">
							<view class="f24 gray3 mb20">可提现</view>
							<text class="f36 gray3 fb">{{ shop_data.supplier&&shop_data.supplier.money  || 0}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shop-order">
				<view class="shop-data-head">
					<text class="f32 gray3 fb">我的订单</text>
					<text class="shop-data-head-more"
						@click="jumpPage('/pages/user/my_shop/my_shop_order?fill=1')">全部<text
							class="icon iconfont icon-jiantou f20"></text></text>
				</view>
				<view class="shop-data-body d-b-c">
					<view class="d-c d-c-c" v-for="(item, index) in orderMenu" :key="index" @click="jumpPage(item.url)">
						<image lazy-load :src="item.image" mode=""></image>
						<view class="f26 gray3">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<view class="shop-menu">
				<view class="shop-menu-item" v-for="(item, index) in menu_list" :key="index"
					@click="jumpPage(item.url)">
					<image lazy-load class="image-icon" :src="item.left_icon" mode=""></image>
					<view class="flex-1 f26 gray3">{{ item.title }}</view>
					<view class="menu-icon icon iconfont icon-jiantou"></view>
				</view>
				<view class="shop-menu-item" v-if="shop_data.supplier.status != 0">
					<image lazy-load class="image-icon" src="/static/icon/commodity_management.png" mode=""></image>
					<view class="flex-1 f26 gray3">商品管理</view>
					<view class="menu-right">未缴纳保证金</view>
					<view class="menu-icon icon iconfont icon-jiantou"></view>
				</view>
				<view class="shop-menu-item" v-else @click="jumpPage('/pages/user/my_shop/pro_admin')">
					<image lazy-load class="image-icon" src="/static/icon/commodity_management.png" mode=""></image>
					<view class="flex-1 f26 gray3">商品管理</view>
					<view class="menu-icon icon iconfont icon-jiantou"></view>
				</view>
				<view class="shop-menu-item" @click="gotoPay(shop_data.supplier.status)">
					<image lazy-load class="image-icon" src="/static/icon/store_deposit.png" mode=""></image>
					<view class="flex-1 f26 gray3">商户保证金</view>
					<view class="menu-right" v-if="shop_data.supplier.status == 0">已缴纳
					</view>
					<view class="menu-right" v-if="shop_data.supplier.status == 10">申请退出
					</view>
					<view class="menu-right" v-if="shop_data.supplier.status == 20">立即交纳
					</view>
					<view v-if="shop_data.supplier.status == 20" class="menu-icon icon iconfont icon-jiantou"></view>
				</view>
				<!-- #ifdef APP -->
				<view v-if="is_open == 1" class="shop-menu-item" @click="toLive">
					<image lazy-load class="image-icon" src="/static/icon/store_live.png" mode=""></image>
					<view class="flex-1 f26 gray3">我的直播</view>
					<view class="menu-icon icon iconfont icon-jiantou"></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				orderMenu: [
					{
						image: '/static/icon/daifahuo.png',
						title: '待发货',
						url: '/pages/user/my_shop/my_shop_order?dataType=delivery'
					},
					{
						image: '/static/icon/daishouhuo.png',
						title: '待收货',
						url: '/pages/user/my_shop/my_shop_order?dataType=received'
					},
					{
						image: '/static/icon/pay.png',
						title: '待支付',
						url: '/pages/user/my_shop/my_shop_order?dataType=payment'
					},
					{
						image: '/static/icon/sell.png',
						title: '退款/售后',
						url: '/pages/user/my_shop/after_sale?tianchong=1'
					}
				],
				menu_list: [{
						title: '商户首页',
						title_right: '',
						left_icon: '/static/icon/store_home.png',
						right_icon: '',
						url: '/pages/shop/shop'
					},
					{
						title: '商户数据',
						title_right: '',
						left_icon: '/static/icon/store_data.png',
						right_icon: '',
						url: '/pages/user/my_shop/my_shop_data'
					}
				],
				shop_data: {
					supplier: {}
				},
				user_id: '',
				shop_supplier_id: '',
				is_open: 0,
				is_full: 0,
				msg_count: 0
			};
		},
		onShow() {
			this.getUserData();
			this.getShopData();
		},
		onLoad() {},
		methods: {
			jumpPage(path) {
				if (path.indexOf('?') != -1) {
					this.gotoPage(path + '&shop_supplier_id=' + this.shop_supplier_id);
				} else {
					this.gotoPage(path + '?shop_supplier_id=' + this.shop_supplier_id);
				}
			},
			// 获取用户数据
			getUserData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/detail', {}, function(res) {
					self.user_id = res.data.userInfo.user_id;
					self.shop_supplier_id = res.data.userInfo.supplierUser.shop_supplier_id;
					uni.hideLoading();
				});
			},
			// 获取商户成交数据
			getShopData() {
				let self = this;
				self._get('supplier.index/tradeData', {}, function(res) {
					self.shop_data = res.data;
					let supplier = self.shop_data.supplier;
					self.logo = supplier && supplier.logo && supplier.logo.file_path || '';
					self.is_open = res.data.is_open;
					self.is_full = res.data.supplier.is_full;
					self.msg_count = res.data.msg_count;
				});
			},
			goback() {
				uni.navigateBack();
			},
			// 支付保证金
			gotoPay(n) {
				if (n != 20) {
					return
				}
				this.gotoPage('/pages/order/deposit-pay');
			},
			toLive() {
				this.gotoPage('/pages/user/my_shop/my_live/my-live/my-live?');
			}
		}
	};
</script>

<style lang="scss">
	.btns {
		width: auto;
		height: 50rpx;
		background: #ffffff;
		border-radius: 25rpx;
		opacity: 0.85;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF5704;
		@include font_color('font_color');
		line-height: 50rpx;
	}

	.shop-head-info {
		margin: 0 auto;
		position: relative;
		padding: 26rpx 18rpx 26rpx 22rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 223rpx;
		background: #FF5704;
		@include background_color('background_color');
	}

	.shop-logo {
		width: 102rpx;
		height: 102rpx;
		display: block;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.shop-info {
		flex: 1;
		box-sizing: border-box;
		padding-top: 10rpx;
	}

	.iconfont {
		font-size: 14px;
	}

	.my-shop {}

	.my-shop-head {
		width: 100%;
		padding-bottom: 19rpx;
	}

	.shop-data {
		position: relative;
		margin-top: -50rpx;
	}

	.shop-data-top {
		width: 100%;
		height: 200rpx;
	}

	.shop-data-bottom {
		width: 100%;
		padding-top: 12rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		display: flex;
		font-weight: 400;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}

	.shop-data-bottom-b {
		width: 100%;
		padding-top: 34rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-weight: 400;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}

	.shop-data-bottom-item {
		color: #fff;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/* 我的订单css */
	.shop-data-order {
		width: 710rpx;
		height: 360rpx;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 22rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		margin-top: -40rpx;
		margin-bottom: 24rpx;
	}

	.shop-order {
		width: 710rpx;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 30rpx 24rpx 30rpx 30rpx;
		margin-bottom: 22rpx;
		box-sizing: border-box;
	}

	.shop-menu {
		width: 710rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 25rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.shop-data-head {
		font-size: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.icon.icon-jiantou {
			color: #999;
		}
	}

	.shop-data-head-more {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.shop-data-body {
		width: 100%;
		padding-top: 20rpx;
	}

	.shop-menu-item:last-child {
		border-bottom: none;
	}

	.shop-menu-item {
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 111rpx;

		.image-icon {
			width: 68rpx;
			height: 68rpx;
			margin-right: 26rpx;
		}
	}

	.shop-data-body image {
		width: 54rpx;
		height: 54rpx;
		margin: 0 auto;
		margin-bottom: 14rpx;
	}

	/* 订单css  END */
	.menu-icon {
		display: inline-block;
		float: right;
		font-size: 24rpx;
		color: #999;
	}

	.menu-right {
		display: inline-block;
		float: right;
		color: #d5d5d5;
		font-size: 24rpx;
		position: relative;
		margin-right: 5rpx;
	}

	.shop-data-head {
		.icon-jiantou.icon {
			font-size: 24rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
</style>